<template>
  <el-dialog
    v-if="dialogVisibleFa"
    v-dialog-drag
    append-to-body
    :visible.sync="dialogVisibleFa"
    :width="widthValue"
    :before-close="handleClose"
    :close-on-click-modal="closeOnClickModal"
    :modal="modal"
    :top="top"
    :title="dialogTitle"
    :center="isCenter"
    :class="['dialogBox', { dialogBox1: !toggle }]"
  >
    <slot></slot>
  </el-dialog>
</template>
<script>
import "./directives"; // 使窗口可拖拽的js文件
export default {
  props: {
    // 弹窗显示与否
    dialogVisibleFa: {
      type: Boolean,
      default: false,
    },
    //图标
    iconText: {
      default: "",
    },
    //弹框标题
    dialogTitle: {
      default: "提示",
    },
    //弹框宽度
    widthValue: {
      default: "30%",
    },
    //是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      default: false,
    },
    //是否需要遮罩层
    modal: {
      default: true,
    },
    // 暂时不起作用！！！！！！！！！！！！
    isCenter: {
      default: false,
    },
    // 暂时不起作用！！！！！！！！！！！！
    top: {
      default: "15vh",
    },
  },
  data() {
    return {
      closeModal: false,
      toggle: true, //(弹框内容超过限高产生滚动时，不可上下拖动，可左右)
    };
  },
  mounted() {
    // 弹框初始化
    // this.closeModal = this.dialogVisibleFa;
    this.dialogInit();
  },
  methods: {
    handleClose() {
      this.$emit("closeFun");
      // 注册父组件可以控制弹框关闭状态的方法
      // this.closeModal = false;
      // this.$emit
      this.$emit("update:dialogVisibleFa", false);
    },
    dialogInit() {
      //添加左上角图标和弹框标题
      let testEl = document.querySelector(".dialogBox .el-dialog__title");
      if (this.iconText) {
        testEl.innerHTML = `
              <i class="iconfont" style="color: #307eff;">${this.iconText}</i>
              ${this.dialogTitle}
          `;
      }
      //弹框内容高度
      let dialogContent = document.querySelector(
        ".dialogBox .el-dialog__body>form>div:nth-child(1)"
      );
      let dialogContentHeight;
      if (dialogContent) {
        dialogContentHeight = dialogContent.offsetHeight;
      }
      //页面可视高度
      let PageHeight = document.body.clientHeight;
      console.log(
        "dialogContentHeight",
        dialogContent,
        dialogContentHeight,
        PageHeight * 0.93 - 60
      );
      //判断弹框高度是否大于93vh；
      if (dialogContentHeight >= PageHeight * 0.93 - 60) {
        //(若大于93vh会产生滚动条，需设置不能上下移动，即固定距离顶部的高度)
        this.toggle = false;
      } else {
        //(若小于93vh无需固定距离顶部的高度)
        this.toggle = true;
      }
      // console.log('弹框打开this.toggle111',this.toggle);
    },
  },
};
</script>
<style scoped>
.dialogBox {
  padding-top: 10vh;
}
.dialogBox >>> .el-dialog {
  margin-top: 0 !important;
  /* top: 0 !important; */
  max-height: 100%;
  overflow-y: auto;
}
.dialogBox1 >>> .el-dialog {
  top: 0 !important;
}
.dialogBox >>> .el-dialog__header {
  background-color: transparent !important;
  padding: 10px !important;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 4px solid #409eff;
  position: sticky;
  top: 0;
  background: #fff !important;
  z-index: 999;
}

.dialogBox >>> .el-dialog__headerbtn {
  position: static;
}

.dialogBox >>> .el-dialog__body {
  padding: 15px 20px;
  max-height: calc(93vh - 130px);
  overflow-y: auto;
}

.dialogBox >>> .el-dialog__title {
  line-height: 25px;
  font-family: 黑体;
  color: #000;
}
.dialogBox >>> .el-input__inner {
  width: 300px;
}
</style>
